<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.6.11.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <button @click="testGet">执行查询操作(get请求)采用之前的方式</button>
        <button @click="testGet2">执行查询操作(get请求)采用Restful方式</button>
        <button @click="testPost">执行增加操作(post请求)采用Restful方式</button>
        <button @click="testPut">执行更新操作(put请求)采用Restful方式</button>
        <button @click="testDelete">执行删除操作(delete请求)采用Restful方式</button>
    </div>



</body>
<script>
    var vue=new Vue({
        el:"#app",
        data:{},
        methods:{
            testGet(){
               axios.get("/user/findById.do?id=10").then((res)=>{

                   console.log(res.data);

               }).catch()
            },
            testGet2(){
                axios.get("/user/10/100").then((res)=>{

                    console.log(res.data);

                }).catch()
            },
            testPost(){
                var params={
                    id:1,
                    name:"jack"
                };
                axios.post("/user",params).then((res)=>{

                    console.log(res.data);

                }).catch()
            },
            testPut(){
                var params={
                    id:1,
                    name:"rose"
                };
                axios.put("/user",params).then((res)=>{

                    console.log(res.data);

                }).catch()
            },
            testDelete(){
                axios.delete("/user/100").then((res)=>{

                    console.log(res.data);

                }).catch()
            }

        }

    })
</script>
</html>